<template>
  <div class="el-vue-search-box-container"
       @keydown.up="selectTip('up')"
       @keydown.down="selectTip('down')">
    <div class="search-box-wrapper">
      <input type="text"
             v-model="keyword"
             @keyup.enter="search"
             @input="autoComplete">
      <span class="search-btn" @click="search">搜索</span>
    </div>
    <div class="search-tips">
      <ul>
        <li v-for="(tip, index) in tips"
            :key="index"
            @click="changeTip(tip)"
            @mouseover="selectedTip=index"
            :class="{'autocomplete-selected': index === selectedTip}">{{tip.name}}
          <span class="auto-item-span">{{tip.district}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="less">
  .el-vue-search-box-container {
    position: relative;
    width: 360px;
    height: 45px;
    background: #fff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
    border-radius: 2px 3px 3px 2px;
    z-index: 10;

    .search-box-wrapper {
      position: absolute;
      display: flex;
      align-items: center;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-left: 12px;

      input {
        flex: 1;
        height: 20px;
        line-height: 20px;
        letter-spacing: .5px;
        font-size: 14px;
        box-sizing: border-box;
        border: none;
        outline: none;
        padding-right: 12px;
      }

      .search-btn {
        width: 45px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        cursor: pointer;
      }
    }

    .search-tips {
      position: absolute;
      top: 100%;
      border: 1px solid #dbdbdb;
      background: #FFF;
      overflow: auto;

      ul {
        padding: 0;
        margin: 0;

        li {
          height: 40px;
          line-height: 40px;
          box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
          padding: 0 10px;
          cursor: pointer;

          &.autocomplete-selected {
            background: #eee;
          }
        }
      }
    }
  }

  .auto-item-span {
    color: #c1c1c1;
    padding-left: 4px;
  }
</style>
<script>
  import {keywordSearch} from "@/api/grid/grid";
  import { debounce } from "@/utils/common.js"
  import CommonMap from '@/views/alarmEventNew/CommonMap';

  export default {
    name: 'new-amap-search-box',
    props: ['searchOption', 'onSearchResult', 'events', 'default', 'mapInstance', 'map', 'mapId'],
    data() {
      return {
        keyword: this.default || '',
        tips: [],
        selectedTip: -1,
        loaded: false,
        adcode: null,
        _placeSearch: null,
        _autoComplete: null
      };
    },
    mounted() {
      if (!this.map) {
        let mapStyle = 1;
        CommonMap.initCTMapOl(this.mapId, mapStyle, [116, 39], 11, (map, CTMapType, mapInstance) => {
          this.map = map;
          this.loaded = true;
          this._onSearchResult = this.onSearchResult;
          if(CommonMap.is3d(this.mapId)){
            this.mapInstance = mapInstance;
            this._autoComplete = this.mapInstance.AutoComplete(this.searchOption || {});
            this.mapInstance.PlaceSearch(this.searchOption || {}).then((placeSearch) => {
              this._placeSearch = placeSearch;
            });
          }else{
            this.mapInstance = mapInstance;
          }
        });
      } else {
        this.loaded = true;
        this._onSearchResult = this.onSearchResult;
        if(CommonMap.is3d(this.mapId)){
          this._autoComplete = this.mapInstance.AutoComplete(this.searchOption || {});
          this.mapInstance.PlaceSearch(this.searchOption || {}).then((placeSearch) => {
            this._placeSearch = placeSearch;
          });
        } else {

        }
      }
    },
    methods: {
      /**
       * 检索
       */
      autoComplete: debounce(async function () {
        if (!this.keyword) {
          return;
        }
        const {data} = await keywordSearch({
          key: "d6dec8c590af05d092033afc2cd51a57",
          keyWord: this.keyword,
          mapType: "01"
        });
        this.tips = data;
        $(".search-tips").css({ display: "block" });
      }, 300, false),
      search(tip) {
        if (this.tips.length === 0) {
          return;
        }
        let placeData;
        if (Array.isArray(tip)) {
          placeData = tip[0];
        } else {
          placeData = this.tips[0];
        }
        placeData.lng = placeData.location.split(',').map(item => Number(item))[0];
        placeData.lat = placeData.location.split(',').map(item => Number(item))[1];
        placeData.provinceCode = placeData.pCode;
        placeData.formattedAddress = placeData.pname + placeData.cityname + placeData.adname + placeData.name;
        this.onSearchResult(placeData);
        this.tips = [];
      },
      changeTip(tip) {
        this.adcode = tip.adcode;
        this.keyword = tip.name;
        const location = tip.location;
        if(location && location.length > 0){
          const lngLat = location.split(',');
          const LngLats = {
            lng: lngLat[0],
            lat: lngLat[1],
            name: tip.name,
            adcode: tip.adcode,
            location: tip.location,
          }
          this.onSearchResult(LngLats);
          this.tips = [];
        } else {
          this.search([tip]);
        }
      },
      selectTip(type) {
        if (type === 'up' && this.selectedTip > 0) {
          this.selectedTip -= 1;
          this.keyword = this.tips[this.selectedTip].name;
          this.adcode = this.tips[this.selectedTip].adcode;
        } else if (type === 'down' && this.selectedTip + 1 < this.tips.length) {
          this.selectedTip += 1;
          this.keyword = this.tips[this.selectedTip].name;
          this.adcode = this.tips[this.selectedTip].adcode;
        } else {
          console.log('解决sonar问题');
        }
      }
    }
  };
</script>
